<template>
	<view class="content" v-if="isShow">
		<view class="middle">
			<view class="middle_top">
				<p class="middle_top_title">答案之书</p>
				<p class="middle_top_miaoshu">The Book of Answers</p>
			</view>
			<view class="middle_middles">
				<img src="../../static/答案之书头像.jpg" alt="" style="width: 60%;padding-top: 40rpx;">
			</view>
			<u-transition :show="show" mode="slide-right" duration='1000'>
			<view class="middle_bottom">
				<p class="p1">所有的预测都不是真的要知道结局</p>
				<p class="p2">而是为了赋予自己迎接结局的勇气</p>
				<!-- <u-notice-bar class="u-notice-bars" :text="data1" direction='column' fontSize='30rpx' icon='' bgColor='transparent' duration='3000' color='#fff'></u-notice-bar> -->
				<p style="padding-top: 20rpx;">“ {{data2}} ”</p>
				  <span class="bottom_button" @click='handlegotoNext'>我要提问</span>
			</view>
			</u-transition>
		</view>
		<u-transition :show="show" mode="slide-left" duration='1000'>
			<view class="byans">
				By ZhaoYuJie
			</view>
		</u-transition>
	</view>
	<view class="content" @longtap="handletouch" v-else-if="!isShow&&!isShow2">
		<view class="yuan">
			<span class="yuan_span">{{data3}}</span>
		</view>
		<view class="yuan_bottom">
			<p>心中默念你的问题</p>
			<p>长按屏幕 3 秒后解答</p>
		</view>
	</view>
	<view class="content" v-if="isShow2">
		<view class="answer">
			<p style="color: #fff;font-size: 30rpx;letter-spacing: 6rpx;text-align: center;">{{answers}}</p>
			<p style="color: #fff;font-size: 30rpx;letter-spacing: 6rpx;text-align: center;">{{answersEN}}</p>
			<span class="bottom_button" @click='handlegotoNext1'>再问一次</span>
		</view>

	</view>
</template>

<script>
	import {MD5} from '../../config/md5.js'
	// import MD5 from '../../config/md5.js'
	export default {
		data() {
			return {
				show:true,
				data1: [
					"别太赶了",
					"别想了",
					"不",
					"不然呢？",
					"不要抱期望",
					"要求不要太高",
					"这是必然的，不要抗拒",
					"不要浪费精力",
					"不要浪费你的时间了",
					"不要做的太火",
					"不用担心",
					"大方一点",
					"等等",
					"放轻松点，慢慢来",
					"管它呢",
					"毫无疑问",
					"好运将会降临",
					"忽略了一件显而易见的事",
					"换个角度想想",
					"会付出代价",
					"会感到庆幸",
					"会很不顺利",
					"会很顺利",
					"会后悔的",
					"会失去自我",
					"会特别顺利",
					"继续前进",
					"结果可能让人惊讶",
					"绝对不",
					"肯定的",
					"没错",
					"木已成舟",
					"你必须解决一些相关的问题",
					"不会后悔的",
					"不会失望的",
					"得真正地努力一下",
					"还有别的选择",
					"你将取得成功",
					"你说了算",
					"你心里已经有答案了",
					"需要合作",
					"需要冒险",
					"要主动",
					"你在开玩笑吗？",
					"你做什么都没用",
					"奇迹即将降临",
					"千万别信",
					"千万不能失败",
					"全力以赴",
					"认清现实吧",
					"三思而后行",
					"尚待时日",
					"省点力气吧",
					"时机未到",
					"听听别人怎么说",
					"听听专家的意见",
					"万一错过，就没这个机会了",
					"为什么不呢？",
					"问问你的亲人",
					"问问自己，为什么要这么干",
					"先做点别的",
					"现在还说不清",
					"现在你可以",
					"相信你的直觉",
					"相信你最初的想法",
					"想得美",
					"想想有没有机会",
					"休息一下就好了",
					"学会妥协",
					"眼光长远一点",
					"要变通",
					"要有点耐心",
					"要知足",
					"要抓住问题的关键",
					"一定会有好的结果",
					"一笑了之",
					"以后再说",
					"用尽一切办法去努力",
					"有",
					"有可能",
					"仔细想想再说",
					"再等等看",
					"障碍重重",
					"这辈子都不可能",
					"这不可取",
					"这不切合实际",
					"这不值得努力",
					"这会影响到你的形象",
					"这件事会很麻烦",
					"这件事情你说了不算",
					"这没什么意义",
					"这取决于你的行动",
					"这是肯定的",
					"没法保证",
					"无法预测",
					"这是在浪费金钱",
					"没什么好的结果",
					"值得奋斗",
					"这种事情不要告诉别人",
					"只有一次机会",
					"众所周知",
					"重新想想",
					"注意细节",
					"做最坏的打算",
					"不要纠结了",
					"毫无道理",
					"结果会让你惊喜",
					"这不是你想要的",
					"不要自作多情",
					"最后一次就会",
					"顺其自然",
					"学会释然",
					"别瞎折腾了",
					"再过几年",
					"不要忽视自己的力量",
					"尽在掌握之中",
					"地点不合适",
					"不作死就不会死",
					"当局者迷",
					"另择吉日",
					"时间会证明一切",
					"并非永恒",
					"倾听你内心的声音",
					"如你所愿",
					"遇上方知有",
					"不值得",
					"见好就收",
					"你猜",
					"时机尚不成熟",
					"这难以置信",
					"与你无关",
					"放手",
					"拭目以待",
					"注意你的步伐",
					"你可以的"
				],
				data2: '........',
				index: 0,
				isShow: true,
				data3: '?',
				isShow2: false,
				answers: "",
				answersEN:""
			}
		},
		onLoad() {},
		created() {
			setInterval(() => {
				// if(index <= this.data1.length){
				// 	this.data2 = this.data1[index]
				// }
				this.changeData1()
				this.index += 1
			}, 2000)
		},
		methods: {
			//切换data1的数据
			changeData1() {
				if (this.index <= this.data1.length) {
					this.data2 = this.data1[this.index]
				}
			},
			handlegotoNext() {
				this.isShow = false
			},
			handlegotoNext1() {
				this.data3 = '?'
				this.isShow2 = false
				this.isShow = false
			},
			handletouch() {
				this.data3 = 3
				let times = setInterval(() => {
					uni.vibrateShort({
						success: function() {
							console.log('success');
						}
					});
					this.data3 = this.data3 - 1
					if (this.data3 == 0) {
						clearInterval(times)
						//展示答案
						this.isShow2 = true
						//生成1-130随机数
						this.getrandom()
					}
				}, 1000)
			},
			async getrandom() {
				var random = Math.random() * (130 - 0);
				console.log(parseInt(random))
				this.answers = this.data1[parseInt(random)]
				var url = 'https://fanyi-api.baidu.com/api/trans/vip/translate'
				var salt =  Date.now()
				var str1 = '20231030001864011' + this.answers + salt +'W2Vt74ma2zwQFek1nUKc';
				var sign = MD5(str1)
				const res = await uni.request({
					url:url,
					header: {
						"Content-Type": "application/json",
					},
					method: "GET",
					data: {
						q: this.answers,
						appid: '20231030001864011',
						salt: salt,
						from: 'zh',
						to: 'en',
						sign: sign
					
					}
				})
				this.answersEN = res.data.trans_result[0].dst
				console.log(res)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 100vh;
		background-color: #0e2022;
		.byans{
			color: #fff;
			padding-top: 20px;
		}
		.middle {
			width: 76%;
			height: 65%;
			border: 2px solid #dbb07b;
			border-radius: 10rpx;

			.middle_top_title {
				color: #dbb07b;
				font-size: 40rpx;
				line-height: 70rpx;
				text-align: center;
				font-weight: 550;
				letter-spacing: 6rpx;
				padding-top: 20rpx;
			}

			.middle_top_miaoshu {
				color: #534232;
				text-align: center;
				font-size: 26rpx;
			}

			.middle_middles {
				display: flex;
				justify-content: center;
			}

			.middle_bottom {
				color: #fff;
				font-size: 26rpx;
				text-align: center;
				padding-top: 20rpx;
				position: relative;

				.p1 {
					letter-spacing: 4rpx;
					line-height: 50rpx;
				}

				.p2 {
					letter-spacing: 6rpx;
				}

				.u-notice-bars {
					width: 50% !important;
					margin: 0 auto;
				}

				.bottom_button {
					border: 2px solid #dbb07b;
					color: #dbb07b;
					border-radius: 10rpx;
					background-color: transparent;
					position: absolute;
					top: 130%;
					left: 50%;
					transform: translateX(-50%);
					padding: 10rpx;
					font-size: 30rpx;
				}
			}
		}

		.yuan {
			width: 240rpx;
			height: 240rpx;
			border: 1px solid #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			.yuan_span {
				font-size: 100rpx;
				font-weight: 300;
				color: #dbb07b;
			}
		}

		.yuan_bottom {
			padding-top: 180rpx;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
		}

		.answer {
			.bottom_button {
				border: 2px solid #dbb07b;
				color: #dbb07b;
				background-color: transparent;
				position: absolute;
				bottom: 8%;
				left: 50%;
				transform: translateX(-50%);
				padding: 10rpx;
				font-size: 26rpx;
			}
		}

	}
</style>

<style>
	.u-notice[data-v-bacc3427] {
		padding-left: 34%;
	}
</style>